import React, { Suspense, lazy } from "react";
import { useRoutes } from "react-router-dom";
import { HomeO, Idcard, CartO, UserO } from '@react-vant/icons';
const MainLayout = lazy(() => import("../views/mainLayout"));
const Home = lazy(() => import("../views/home"));
const Car = lazy(() => import("../views/car"));
const Classify = lazy(() => import("../views/classify"));
const My = lazy(() => import("../views/my"));

const Detail = lazy(() => import("../views/detail"));
const Login = lazy(() => import("../views/login"));
const Search = lazy(() => import("../views/search"));
const Order = lazy(() => import('../views/order'))
const PayResult = lazy(() => import('../views/payResult'))

export const layOutChild = [
  {
    path: '/',
    element: <Home></Home>,
    meta: {
      title: '首页',
      icon: <HomeO  />
    }
  },
  {
    path: '/classify',
    meta: {
      icon:  <Idcard  />,
      title: '分类'
    },
    element:<Classify></Classify>
  },
  {
    path: '/car',
    element: <Car></Car>,
    meta: {
      title: '购物车',
      icon: <CartO  />,
    }
  },
  {
    path: '/my',
    element: <My></My>,
    meta: {
      title: '我的',
      icon: <UserO  />,
    }
  },
]

export const Route_List = [
  {
    path: "/",
    element: <MainLayout></MainLayout>,
    children: layOutChild
  },
  {
    path: "/detail/:id",
    element: <Detail></Detail>,
  },
  {
    path: "/login",
    element: <Login></Login>,
  },
  {
    path: "/search",
    element: <Search></Search>,
  },
  {
    path: '/order/:price/:title',
    element: <Order></Order>
  },{
    path: '/pay/result',
    element: <PayResult></PayResult>
  }
];

const Router: React.FC = () => {
  const RouterView = () => useRoutes(Route_List);
  return (
    <Suspense>
      <RouterView></RouterView>
    </Suspense>
  );
};

export default Router;
